<template>
  <div class="personal_data wh100">
    <navBar title="个人资料" :leftArrowFlag="true" />
    <div class="form_wrap">
      <van-form @submit="onSubmit" class="form">
        <!-- <van-field name="uploader" label="头像" class="avatar_box">
          <template #input>
            <van-uploader :after-read='afterUpload'  :before-read="beforeUpload" v-model="form.uploader" >
              <img class="avatar" src="../../../assets/imgs/avatar.png" alt="">
            </van-uploader>
          </template>
        </van-field> -->
        <!-- <van-field name="uploader" label="头像" class="avatar_box">
          <template #input>
            <van-uploader
              :after-read="afterUpload"
              :max-count="1"
              :before-read="beforeUpload"
              v-model="form.uploader"
            >
              <img class="avatar" :src="avatar" alt="" />
            </van-uploader>
          </template>
        </van-field> -->
        <van-field name="uploader" label="头像" class="avatar_box">
          <template #input>
            <van-uploader
              :after-read="afterUpload"
              :max-count="1"
              :before-read="beforeUpload"
              v-model="form.uploader"
            >
              <img class="avatar" :src="avatar" alt="" />
            </van-uploader>
          </template>
        </van-field>
        <van-field
          v-model="form.nickname"
          name="nickname"
          label="昵称"
          placeholder="请输入您的昵称"
        />
        <van-field
          v-model="form.name"
          name="name"
          label="姓名"
          placeholder="请输入您的姓名"
        />


         <van-field
            readonly
            clickable
            name="birthday"
            :value="form.birthday"
            label="生日"
            right-icon="arrow-down"
            placeholder="点击选择生日"
            @click="showCalendar = true"
          />
          <van-popup v-model="showCalendar" position="bottom">
            <van-datetime-picker
              type="date"
              title="选择年月日"
              :min-date="minDate"
              :max-date="maxDate"
              @confirm="onConfirm1"
              @cancel="showCalendar = false"
            />
          </van-popup>

        <!-- <van-field
          v-model="form.sex"
          name="sex"
          label="性别"
          placeholder="请输入您的性别"
        /> -->
        <van-field name="gender" label="选择性别" >
          <template #input>
            <van-radio-group v-model="form.gender" direction="horizontal">
              <van-radio :name="1">男</van-radio>
              <van-radio :name="-1">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          readonly
          clickable
          name="userArea"
          :value="form.userArea"
          label="地区选择"
          placeholder="点击选择省市区"
          @click="showArea = true"
        />
        <van-field
            name="introduce"
            v-model="form.introduce"
            rows="4"
            autosize
            label="个人简介"
            type="textarea"
            maxlength="100"
            placeholder="请输入个人简介"
            show-word-limit
          />
        <van-popup v-model="showArea" position="bottom">
          <van-area
            :area-list="areaList"
            @confirm="onConfirm"
            @cancel="showArea = false"
          />
        </van-popup>
        <div class="btn_box">
          <van-button :loading='btnLoading' :disabled='btnDisabled' round block type="primary" native-type="submit"
            >确认修改</van-button
          >
        </div>
      </van-form>
      
    </div>
  </div>
</template>

<script>
import navBar from "@/components/navBar";
import areaList from '@/utils/areaList'
import { operation,getData } from '@/api/my/personalData'
export default {
  name: "personalData",
  data() {
    return {
       btnLoading:false,
      btnDisabled:false,
      showCalendar:false,
      avatar: require("../../../assets/imgs/avatar.png"),
            minDate: new Date(1900, 0, 1),
      maxDate: new Date(),
      form: {
        id:'',
        uploader: [],
        nickname:'',
        name:'',
        birthday:'',
        gender:'',
        userArea:'',
        introduce:'',
        avatarUrl:''
      },
      showArea:false,
      areaList:areaList // 数据格式见 Area 组件文档
    };
  },
  components: {
    navBar,
  },
  created(){
    this.init()
  },
  methods: {
    init(){
      getData({}).then(({data}) => {
        let { id,avatarUrl,nickname,name,birthday,gender,userArea,introduce } = data
        this.form={avatarUrl,id,nickname,name,birthday,gender,userArea,introduce,uploader:[{url:avatarUrl, isImage: true}]}
        // if(avatarUrl){
        //   this.form.uploader=[
        //     {
        //       url:avatarUrl
        //     }
        //   ]
        // }else{
        //   this.form.uploader=[]
        // }
        
      }).catch((err) => {
        console.log(err)
      });
    },
    beforeUpload(file){
      // if (file.type !== 'image/jpeg') {
      //   this.$toast('请上传 jpg 格式图片');
      //   return false;
      // }
       return true;
    },
    afterUpload(file){
      console.log(file,'111')
    },
    onSubmit(data) {
      let params={...this.form}
      if(data.uploader.length>0){
        params.avatarUrl=data.uploader[0].content
      }else{
        params.avatarUrl=''
      }
      // params.avatarUrl==data.uploader?data.uploader[0].content:''
      console.log(params,'canshu')
      this.btnLoading=true
      this.btnDisabled=true
      operation(params).then(()=>{
        this.$toast.success({
          type: 'success',
          message: '修改成功',
          onClose: () => {
            this.btnLoading=false
            this.btnDisabled=false
           this.$router.go(-1)
          },
        })
        
      }).catch(err=>{
        this.btnLoading=false
            this.btnDisabled=false
      })
    },
    onConfirm(values) {
      this.form.userArea = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join('/');
      this.showArea = false;
    },
    onConfirm1(values) {
      this.form.birthday = this.$dayjs(values).format('YYYY-MM-DD');
      this.showCalendar = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.personal_data {
  display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex; 
display: flex;
  -moz-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
/deep/ .van-radio__icon--checked .van-icon{
  background-color:$defaultColor!important;
  border-color:$defaultColor!important;
}
  .form_wrap {
    width: 100%;
    flex: 1;
    padding: 0.05rem 0.15rem;
    .form {
      color: $lightBlack;
      /deep/ .van-field__label {
        color: $lightBlack;
        font-size: 14px;
      }
      /deep/ .van-uploader{
        // .van-uploader__file{
        //      width: 0.6rem;
        //   height: 0.6rem;
        //    margin:0;
        //   position: absolute;
        //   background: transparent;
        //   .van-uploader__upload-icon{
        //     display: none;
        //   }
        // }
        // .van-uploader__upload{
        //   width: 0.6rem;
        //   height: 0.6rem;
        //   margin:0;
        //   position: absolute;
        //   background: transparent;
        //   .van-uploader__upload-icon{
        //     display: none;
        //   }
        // }
        .van-uploader__preview-image {
          width: 0.6rem;
          height: 0.6rem;
          border-radius: 50%;
        }
      }
      /deep/ .van-uploader__preview{
        margin:0;
      }
      /deep/ .van-button--primary{
    width: 100%;
    margin:0;
    border-radius: 0.1rem;
    background-color: $defaultColor;
    border: 1px solid $defaultColor;
    box-shadow:0px 0px 10px $defaultColor;
}
      .btn_box{
        margin-top: 0.4rem;
      }
      .avatar {
        width: 0.6rem;
        height: 0.6rem;
        border-radius: 50%;
      }
      .avatar_box {
        padding: 0.05rem 0;
        display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex; 
display: flex;
        -moz-justify-content: space-between;
-webkit-justify-content: space-between;
justify-content: space-between;
        -moz-align-items: center;
-webkit-align-items: center;
align-items: center;
        /deep/ .van-field__control--custom {
          justify-content: flex-end;
          .van-image {
            width: 0.6rem;
            height: 0.6rem;
            img {
              border-radius: 50%;
            }
          }
        }
      }
    }
  }
}
</style>